<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒模型布局</title>
	<style type="text/css">
		ul{
			margin: 0;
			padding: 0;
			list-style: none;

			width: 500px;
			height: 400px;
			border: 5px solid #000;
			background-color: gold;
			margin: 50px auto 0;

			/*按照弹性盒模型,必须在父元素设置*/
			display: flex;

			/*flex-direction : 
			row 默认子元素水平靠左排列
			row-reverse 资源素靠右倒序排列
			column 竖着排
			column-reverse 倒序竖排*/
			flex-direction: row;

			/*flex-wrap : 
			nowrap 默认值,子元素宽度超过父级宽度时不换行
			wrap 子元素超过父级宽度时换行
			wrap-reverse 子元素宽度超过父级宽度时换行且倒序排列*/
			flex-wrap: wrap-reverse;
/*
			justify-content : 
			flex-start 整体子元素靠左
			flex-end 整体子元素靠右
			center 整体子元素居中
			space-between (第一个子元素靠左顶格,最后一个子元素靠右顶格,中间的元素等分间距)
			space-around 第一个子元素靠左间距和最后一个子元素靠右的间距是中间的子元素间距的一半,中间的元素还是等分距离*/
			justify-content: space-between;

			/*align-items : 
			flex-start 整体子元素靠上
			flex-end 整体子元素靠下
			center 整体子元素居中
			baseline 子元素内的文字底部对齐,如果文字的大小不同,会导致子元素水平不对齐
			stretch 如果子元素不设置高度,高度被拉伸到和父元素高度相同(除去自身的margin)*/
			align-items: flex-start;

			/*align-content : 
			flex-start 多行整体靠上排列
			flex-end 多行整体靠下排列
			center 多行整体居中排列
			space-between 第一行子元素靠左顶格,最后一行子元素靠下顶格,中间行元素等分垂直的间距
			space-around 第一行子元素靠上的间距和最后一行子元素靠下的间距是中间行元素间距的一半,中间的行的元素等分垂直间距 
			stretch */
		}

		/*li也被称为条目*/
		ul li{
			width: 50px;
			height: 50px;
			margin: 10px;
			line-height: 50px;
			text-align: center;
			color: #fff;
			background-color: green;

			/*每个子元素增长的宽度比例是:1;*/
			flex-grow: 1;

			/*每个子元素缩小的宽度比例是:1;*/
			flex-shrink: 1

			/*用来确定弹性条目的初始主轴尺寸。
			flex-basis ：length | percentage | auto | content*/

			/*覆写父元素指定的对齐方式
			align-self ：auto | flex-start | flex-end | center | baseline | stretch*/

			/*改变条目在容器中的出现顺序
			order : integer*/

		}

		ul li:nth-child(2){
			/*单独设置第二个元素的增长比例是:3;*/
			flex-grow: 3;
		}

		ul li:nth-child(2){
			/*单独设置第二个元素的增长比例是:3;*/
			flex-shrink: 3;
		}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</body>
</html>